<template>
  <div class="box section clearfix">
    <el-form style="text-align: left">
        <el-row class="query" >
          <el-col :span="24">
            <el-form-item label="执行分期月份：" prop="query.answerMonth">
              <el-date-picker
                  v-model="query.answerMonth"
                  type="month"
                  value-format="yyyy-MM"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item >
              <el-button
                  type="danger"
                  v-no-more-click
                  @click="clearFun"
              >清空
              </el-button
              >
              <el-button
                  type="primary"
                  v-no-more-click
                  @click="getList"
              >搜索
              </el-button
              >
            </el-form-item>

          </el-col>
          <el-col :span="24">
            <el-form-item>
              <el-button
                  icon="el-icon-circle-plus-outline"
                  size="small"
                  type="primary"
                  @click="orderExport"
                  v-no-more-click
              >导出
              </el-button
              >
            </el-form-item>
          </el-col>

        </el-row>
    </el-form>
    <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
    >
      <el-table-column
          label="执行分期月"
          align="center"
          prop="answerMonth"
          :show-overflow-tooltip="true"
      >

      </el-table-column>
      <el-table-column
          prop="executeNum"
          label=" 已执行扣款笔数"
          align="center"
          :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{scope.row.executeNum}}笔
        </template>

      </el-table-column>
      <el-table-column
          prop="executeAmount"
          label="执行扣款总额"
          align="center"
          :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{scope.row.executeAmount}}元
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
              type="text"
              size="small"
              style="color: rgb(255, 164, 47);"
              v-no-more-click
              :visible.sync="OverdueRecordDetail"
              @click="handleClick(scope.row)"
          >分期明细
          </el-button
          >
        </template>
      </el-table-column>

      <el-dialog
          title="分期明细"
          :visible.sync="OverdueRecordDetail"
          append-to-body
          width="70%"
          top="30px"
      >
        <OverdueRecordDetail
            v-if="OverdueRecordDetail"
            :OverdueRecordDetail="OverdueRecordDetail"
            :month = executeTime
        >
        </OverdueRecordDetail>
      </el-dialog>

    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
          background
          layout="total,prev, pager, next, sizes"
          :total="total"
          :page-size="query.pageSize"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  getoverdveDeduction
} from "../../../src/assets/js/api";
import OverdueRecordDetail from "../../components/byStages/OverdueRecordDetail";
import { expotOut } from "../../assets/js/utlis";


export default {
  name: "OverdueRecord",
  components: { OverdueRecordDetail },
  data() {
    return {
      query: {
        pageSize: 10,
        pageNum: 1,
        answerMonth: "",
        state:''
      },
      tableData: [],
      total:0,
      currentPage:1,
      pages:'',
      OverdueRecordDetail:false,
      fileParmas: {},
      executeTime: "",
    }
  },
  created() {
    this.getList();
  },
  methods: {
    //获取数据
    getList(){
      getoverdveDeduction(this.query).then(res => {
        if (res.code == 200) {
          this.executeTime = this.query.answerMonth
          this.tableData = res.data.records;
          this.currentPage = res.data.current;
          this.total = res.data.total;
          this.pages = res.data.pages;
        }
      })
    },

  //分页
  handleCurrentChange(cpage) {
    this.query.pageNum = cpage;
    this.getList();
  },
  handleSizeChange(psize) {
    this.query.pageSize = psize;
    this.getList();
  },
    //分期明细
    handleClick(row){
      this.OverdueRecordDetail =  true;
      this.executeTime = row.answerMonth;
    },

  //导出
    orderExport() {
      this.fileParmas.answerMonth = this.executeTime;
      expotOut(
          "POST",
          "/business/sign/exportOverdueDeduction",
          this.fileParmas, // 导出请求参数
          "逾期扣款表" // 导出文件名字
      );
    },
    //   清空按钮
    clearFun() {
      this.query.answerMonth = "";
      this.query.pageNum = 1;
      this.executeTime = ""
      this.getList();
    },
  },
}
</script>

<style scoped type="less">
::v-deep .el-table td {
  padding: 10px 0;
}

::v-deep .el-table th {
  padding: 10px 0;
}

.query ::v-deep .el-input__inner {
  height: 32px;
}

.query ::v-deep .el-input__icon {
  line-height: 32px;
}

.query ::v-deep .el-form-item {
  width: 370px;
  display: inline-block;
}

.query ::v-deep .vue-treeselect__control {
  line-height: 30px;
  height: 32px;
}

.query ::v-deep .vue-treeselect__single-value,
.query ::v-deep .vue-treeselect__placeholder {
  line-height: 30px;
}
::v-deep .el-pagination {
  position: absolute;
  right: 0;
  margin-top: 20px;
}

::v-deep .el-pagination__total {
  visibility: hidden;
}
.title
{
  font-family: Microsoft YaHei;  font-size: 12px;  font-weight: 400;  line-height: 21px;  position: absolute;  left: 0;  margin-top: 15px;  color: rgba(51, 51, 51, 1);
}
</style>